<template>
    <div class="marking-area">
        <div class="bottom">
            <div class="left">
                <div class="left-top">
                    <h3>
                        <el-button class="back" type="text" @click="back">
                            <span class="el-icon-back"></span>
                            返回
                        </el-button>
                        您的批卷进度
                    </h3>
                    <div class="cards">
                        <div class="card no">
                            <div class="title">待评卷</div>
                            <div class="val"><span class="number">{{unmarkedCount}}</span>份</div>
                        </div>
                        <div class="card done">
                            <div class="title">已评卷</div>
                            <div class="val"><span class="number">{{markedCount}}</span>份</div>
                        </div>
                        <div class="card total">
                            <div class="title">总评卷</div>
                            <div class="val"><span class="number">{{total}}</span>份</div>
                        </div>
                    </div>
                    <h3>
                        <span></span>
                        各类卷批改数据
                    </h3>
                    <div class="cards-statistics">
                        <div class="card" v-for="level in levelStatisticsList" :key="level.name">
                            <div>
                                <span class="primary">{{level.name}}类</span>
                                <span>{{level.dealCount}}/{{level.total}}</span>
                            </div>
                            <el-progress text-inside :stroke-width="20" :percentage="Math.round(level.dealCount/level.total * 100)"></el-progress>
                        </div>
                    </div>
                </div>
                <div class="left-bottom">
                    <div class="left-bottom-left">
                        <h3>
                            <span></span>
                            评分细则
                        </h3>
                        <div class="btns">
                            <el-button v-for="(level, index) in levelList"
                                :key="level.name"
                                @click="showLevelDescription(index)"
                                :class="{'active': level.active}">{{level.name}}类</el-button>
                        </div>
                        <div class="level-description">
                            <h3></h3>
                            <p></p>
                        </div>
                    </div>
                    <div class="left-bottom-right">
                        <h3>
                            <span></span>
                            范例图
                        </h3>
                        <el-image style="width: 190px;height: 200px;"
                                  fit="cover"
                                  :src="levelDescrition.demoUrl"></el-image>
                        <h4>鼠标移入放大查看示例图</h4>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right-top" ref="imgViewerContainer" @mouseenter="imgViewerEnter" @mouseleave="imgViewerLeave">
                    <span class="image-header" v-if="paperList[currentPosition] && paperList[currentPosition].level">
                        <span>{{paperList[currentPosition].level}}<span v-if="paperList[currentPosition].level">类</span></span>
                        <span>{{paperList[currentPosition].mark}}<span v-if="paperList[currentPosition].mark">分</span></span>
                    </span>
                    <div class="previous-image">
                        <el-image fit="cover"
                                  :src="imgList[currentPosition - 1] ? imgList[currentPosition - 1] : ''">
                            <div slot="error" class="image-slot">
                                <span>没有图片啦</span>
                            </div>
                        </el-image>
                        <span v-if="paperList[currentPosition - 1] && paperList[currentPosition - 1].level" class="mark-level-container">
                            <span>{{paperList[currentPosition - 1].level}}<span v-if="paperList[currentPosition - 1].level">类</span></span>
                            <span>{{paperList[currentPosition - 1].mark}}<span v-if="paperList[currentPosition - 1].level">分</span></span>
                        </span>
                    </div>
                    <vue-img-viewer ref="imgViewer"
                                    :container="'imgViewerContainer'"
                                    :image-urls="imgList"
                                    :visible="visible"
                                    :initial-scale="0.1"
                                    @positionUpdated="imgSwitchEnd"
                                    :start-position="startPosition">
                    </vue-img-viewer>
                    <div>
                        <div class="center">
                            <span class="icon el-icon-warning-outline"></span>
                            <div>查询不到该评级下的试卷...</div>
                        </div>
                    </div>
                    <div class="next-image">
                        <el-image fit="cover"
                                  :src="imgList[currentPosition + 1] ? imgList[currentPosition + 1] : ''">
                            <div slot="error" class="image-slot">
                                <span>没有图片啦</span>
                            </div>
                        </el-image>
                        <span v-if="paperList[currentPosition + 1] && paperList[currentPosition + 1].level" class="mark-level-container">
                            <span>{{paperList[currentPosition + 1].level}}</span>
                            <span>{{paperList[currentPosition + 1].mark || '--'}}</span>
                        </span>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="right-btns">
                        <el-button v-for="(level, index) in levelList"
                                   :key="level.name"
                                   @click="switchCurrentLevel(index)"
                                   :class="{'active': paperList[currentPosition].level === level.name}">{{level.name}}</el-button>
                    </div>
                    <div>
                        <el-button class="mark-btn" @click="showMarkDialog">评分</el-button>
                    </div>
                </div>
            </div>
            <el-dialog class="marking-dialog" :visible.sync="markDlgVisible" title="评分">
                <div class="item">
                    <el-select v-model="level" placeholder="请选择等级">
                        <el-option v-for="levelInfo in classList" :label="levelInfo" :value="levelInfo"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <el-input v-model="mark" placeholder="请输入当前考卷分数"></el-input>
                </div>
                <template slot="footer">
                    <el-button class="primary-submit" @click="submitLevelAndMark">提交</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import vueImgViewer from '../../components/img-viewer'
    import {basicRequest} from "../../utils/request";
    export default {
        name: "markingArea",
        components: {
            vueImgViewer
        },
        data: () => {
            return{
                level: '',
                mark: '',
                unmarkedCount: 0,
                markedCount: 0,
                markDlgVisible: false,
                total: 0,
                classList: [ 'A','B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
                paperList: [],
                imgList: [],
                levelList: [],
                levelStatisticsList: [],
                imageHeaderVisible: true,
                visible: true,
                currentPosition: 0,
                startPosition: 0, // 放大图片的起始索引
                rightLevelList: [],
                levelDescrition: {
                    demoUrl: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=294915964,1981833871&fm=26&gp=0.jpg",
                    description: 'sjklgjlkgjjskledjkljkljgl'
                },
                currentLevel: 'B'
            }
        },
        methods: {
            queryProgress() {
                basicRequest({
                    url: '/paper/agg'
                }).then(data => {
                    console.log(data)
                    this.unmarkedCount = data.count
                    this.markedCount = data.dealCount
                    this.total = data.total
                    this.levelStatisticsList = data.stats
                })
            },
            queryPaperList({status, grade}) {
                return new Promise((resolve, reject) => {
                    this.paperList = []
                    // status = 1 未评级，status= 0 未评分
                    const data = {
                        province: this.$route.params.province,
                        course: this.$route.params.subject,
                        current: 1,
                        size: 99999
                    }
                    if (status === 0 || status === 1) {
                        data.status = status
                    }
                    if (grade) {
                        data.grade = grade
                    }
                    basicRequest({
                        method: 'post',
                        url: '/paper/query',
                        data: data
                    }).then(data => {
                        resolve(data)
                        if (data.records && data.records.length) {
                            const list = []
                            const imgList = []
                            data.records.forEach(paperInfo => {
                                imgList.push(paperInfo.img)
                                list.push({
                                    id: paperInfo.id,
                                    name: paperInfo.admissionTicketCode,
                                    url: paperInfo.img,
                                    permission: paperInfo.admissionTicketCode,
                                    level: paperInfo.grade,
                                    show: false,
                                    mark: paperInfo.score
                                })
                            })
                            this.paperList = list
                            this.imgList = imgList
                        }
                    }, error => {
                        reject()
                        console.log(error)
                    })
                })
            },
            queryLevelList() {
                basicRequest({
                    method: 'get',
                    url: '/paper/grade'
                }).then(data => {
                    console.log(data)
                }, error => {
                    console.log(error)
                })
                const list = []
                const letters = this.classList
                for (let i = 0; i < letters.length; i++) {
                    list.push({
                        name: letters[i],
                        count: Math.round(Math.random() * 2000),
                        total: 3684,
                        active: false
                    })
                }
                this.levelList = [].concat(list)
            },
            updatePaper({paperId, grade, score}) {
                return new Promise((resolve, reject) => {
                    const data = {}
                    let tipStr = ''
                    data.paperId = paperId
                    if (grade) {
                        data.grade = grade
                    }
                    if (score) {
                        data.score = score
                    }
                    basicRequest({
                        method: 'post',
                        url: '/paper/update',
                        data: data
                    }).then(data => {
                        resolve(data)
                        // this.unsetAllLevel()
                        if (grade) {
                            this.paperList[this.currentPosition].level = grade
                        }
                        if (score) {
                            this.paperList[this.currentPosition].mark = score
                        }
                        if (this.currentPosition < this.paperList.length - 1) {
                            this.startPosition += 1
                            this.currentPosition += 1
                        } else {
                            this.$message.warning('已经到最后一张试卷啦！')
                        }
                        // 更新统计数据
                        this.queryProgress()
                    }, error => {
                        reject(error)
                        console.log(error)
                    })
                })
            },
            showLevelDescription(index) {
                this.levelList.forEach(level => {
                    level.active = false
                })
                this.levelList[index].active = true
            },
            unsetAllLevel() {
                this.levelList.forEach(levelInfo => {
                    levelInfo.active = false
                })
            },
            switchCurrentLevel(index) {
                this.currentLevel = this.levelList[index].name
                this.updatePaper({
                    paperId: this.paperList[this.currentPosition].id,
                    grade: this.currentLevel
                })
            },
            imgSwitchEnd(currentImgIndex) {
                this.currentPosition = currentImgIndex
                this.startPosition = currentImgIndex
                // console.log(currentImgIndex)
            },
            imgViewerEnter() {
                const scroller = document.querySelector('.content-container')
                const scrollBarWidth = scroller.offsetWidth - scroller.clientWidth
                const initPadding = window.getComputedStyle(scroller)['padding']
                const initPaddingRight = window.getComputedStyle(scroller)['padding-right']
                if (scrollBarWidth) {
                    scroller.style.paddingRight = 20 + 'px'
                }
                scroller.style.overflowY = 'hidden'
            },
            imgViewerLeave() {
                const scrollBarWidth = window.innerWidth - document.documentElement.offsetWidth
                const scroller = document.querySelector('.content-container')
                const initPaddingRight = scroller.style.paddingRight
                if (initPaddingRight) {
                    scroller.style.paddingRight = 'initPaddingRight'
                } else {
                    scroller.style.paddingRight = 'initial'
                }
                scroller.style.overflowY = 'scroll'
            },
            showMarkDialog() {
                this.markDlgVisible = !this.markDlgVisible
                this.level = this.paperList[this.currentPosition].level
                this.mark = this.paperList[this.currentPosition].mark
            },
            submitLevelAndMark() {
                this.updatePaper({
                    paperId: this.paperList[this.currentPosition].id,
                    grade: this.level,
                    score: this.mark
                }).then(() => {
                    this.markDlgVisible = false
                    if (this.currentPosition < this.paperList.length - 1) {
                        this.currentPosition += 1
                        this.startPosition += 1
                    }
                })
            },
            back() {
                this.$router.back()
            }
        },
        created() {
            const routeParams = this.$route.params
            const query = {}
            if (routeParams.level === '未评级') {
                query.status = 1
            } else {
                query.grade = routeParams.level
            }
            console.log(query)
            this.queryPaperList(query).then(data => {
                if (routeParams.start > 0) {
                    if (data.records && data.records.length) {
                        data.records.forEach((paperInfo, index) => {
                            if (paperInfo.id == routeParams.start) {
                                this.startPosition = index
                                this.currentPosition = index
                            }
                        })
                    }
                } else {
                    this.startPosition = 0
                    this.currentPosition = 0
                }
            }).then(() => {
                this.queryLevelList()
                this.queryProgress()
            })
            // if (routeParams.level === '未评级') {
            //     this.queryPaperList({status: 1})
            // } else {
            //     this.queryPaperList({grade: routeParams.level})
            // }
        }
    }
</script>

<style lang="scss">
    .progress{
        height: 20px;
        background: #CBCEDC;
        border-radius: 10px;
        margin-top: 10px;
        .progress-bar{
            background-color: #204BD6;
        }
    }
    .marking-area{
        .el-progress-bar{
            margin-top: 10px;
        }
        .el-progress-bar__inner{
            background-color: #204BD6;
        }
        .el-progress-bar__outer{
            background-color: #CBCEDC;
        }
        .el-image{
            .image-slot{
                display: flex;
                justify-content: center;
                text-align: center;
                align-items: center;
                width: 100%;
                height: 100%;
                background-color: #fff;
                color: #cccccc;
            }
        }
        .marking-dialog{
            .el-dialog{
                width: 650px;
                height: 430px;
                box-sizing: border-box;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
            }
            .el-dialog__header{
                font-weight: bold;
                font-size: 30px;
                height: 94px;
                line-height: 94px;
                border-bottom: 1px solid #D8D8D8;
            }
            .el-dialog__body{
                .item{
                    margin-bottom: 30px;
                }
                .el-select{
                    width: 100%;
                }
                padding: 30px 95px;
            }
            .el-dialog__footer{
                padding: 0 95px 50px;

            }
        }
    }
</style>

<style scoped lang="scss">
    .marking-area{
        .primary-submit{
            width: 100%;
            background-color: #204BD6;
            color: #fff;
        }
        .svg-icon{
            width: 30px;
            height: 40px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            line-height: normal;
            display: inline-block;
            &.back{
                background: url("../../assets/back.svg") no-repeat center center;
                -webkit-background-size: 100%;
                background-size: 100%;
            }
        }
        &>div{
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            &>div{
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                &>div{
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    border-radius: 10px;
                }
            }
        }
        .bottom{
            padding: 10px;
            background-color: #F3F3F3;
            display: flex;
            .left{
                width: 460px;
                margin-right: 20px;
                flex: 0.3;
                .left-top{
                    background-color: #fff;
                    margin-bottom: 10px;
                    height: 570px;
                    padding: 20px;
                    box-sizing: border-box;
                    h3{
                        text-align: right;
                        .back{
                            float: left;
                            padding: 0;
                        }
                        &:first-child{
                            margin-top: 0;
                        }
                    }
                    .cards{
                        display: flex;
                        flex-direction: row;
                        padding: 0 5px;
                        .card{
                            flex: 0.33;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 10px;
                            height: 60px;
                            color: #fff;
                            font-size: 16px;
                            margin-right: 12px;
                            padding: 8px 12px 0;
                            &:last-child{
                                margin-right: 0;
                            }
                            .title{
                                margin-bottom: 5px;
                            }
                            .val{
                                font-size: 14px;
                                font-weight: bold;
                                .number{
                                    font-size: 28px;
                                }
                            }
                            &.no{
                                background-color: #59BF99;
                            }
                            &.done{
                                background-color: #557DFF;
                            }
                            &.total{
                                background-color: #DE5887;
                            }
                        }
                    }
                    .cards-statistics{
                        display: grid;
                        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
                        grid-template-columns: 1fr 1fr 1fr;
                        .card{
                            font-size: 14px;
                            color: #0E0E0E;
                            background-color: #F3F3F3;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 10px;
                            padding: 10px;
                            margin-bottom: 7px;
                            margin-right: 7px;
                            .primary{
                                color: #204BD6;
                            }
                        }
                    }
                }
                .left-bottom{
                    height: 300px;
                    background-color: #fff;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    h3{
                        &:first-child{
                            margin-top: 0;
                        }
                    }
                    .left-bottom-left{
                        flex: 0.5;
                        margin-right: 10px;
                        border-right: 1px solid #C9CBD4;
                        .btns{
                            display: grid;
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                            grid-template-rows: 1fr 1fr;
                            button{
                                padding: 3px 5px;
                                margin: 0 10px 10px 0;
                                &.active{
                                    background-color: #204BD6;
                                    color: #fff;
                                }
                            }
                        }
                    }
                    .left-bottom-right{
                        flex: 0.5;
                        text-align: center;
                        h3{
                            text-align: left;
                        }
                        h4{
                            margin: 10px;
                        }
                    }
                }
            }
            .right{
                flex: 0.7;
                .right-top{
                    position: relative;
                    height: 800px;
                    -webkit-border-radius: 10px 10px 0 0;
                    -moz-border-radius: 10px 10px 0 0;
                    border-radius: 10px 10px 0 0;
                    overflow: hidden;
                    .image-header {
                        position: absolute;
                        width: 80px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        left: 0;
                        top: 0;
                        color: #05D5F5;
                        background-color: rgba(0,0,0, .5);
                        -webkit-border-radius: 10px 0 10px 0;
                        -moz-border-radius: 10px 0 10px 0;
                        border-radius: 10px 0 10px 0;
                        z-index: 101;
                    }
                    .previous-image{
                        position: absolute;
                        top: 50%;
                        left: 0;
                        margin-top: -200px;
                        width: 300px;
                        height: 400px;
                        .el-image{
                            width: 300px;
                            height: 400px;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 10px;
                        }
                    }
                    .next-image{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        margin-top: -200px;
                        width: 300px;
                        height: 400px;
                        .el-image{
                            width: 300px;
                            height: 400px;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 10px;
                        }
                    }
                    .mark-level-container{
                        display: inline-block;
                        position: relative;
                        width: 80px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        left: 220px;
                        bottom: 43px;
                        color: #fff;
                        background-color: #EC2D56;
                        -webkit-border-radius: 15px 0 10px 0;
                        -moz-border-radius: 15px 0 10px 0;
                        border-radius: 15px 0 10px 0;
                    }
                }
                .right-bottom{
                    background-color: #fff;
                    padding: 10px;
                    width: calc(100% - 20px);
                    display: flex;
                    flex-direction: row;
                    -webkit-border-radius: 0 0 10px 10px;
                    -moz-border-radius: 0 0 10px 10px;
                    border-radius: 0 0 10px 10px;
                    align-items: end;
                    .right-btns{
                        button{
                            border: none;
                            background: #F3F3F3;
                            margin-left: 0;
                            margin-right: 10px;
                            margin-bottom: 10px;
                            width: 50px;
                            &.active {
                                background-color: #204BD6;
                                color: #fff;
                            }
                        }
                    }
                    .mark-btn{
                        background-color: #204BD6;
                        color: #fff;
                    }
                }
            }
        }
    }

</style>